<template>
  <div class="contnet-box">
    <div class="data-box flex ac">
      <div class="data-box-left-box">
        <div class="tree-box">
          <!-- 
            :render-content="renderContent" -->
          <el-tree
            highlight-current
            :data="data"
            :props="defaultProps"
            accordion
            icon="ArrowRightBold"
          >
            <template #default="scope">
              <div class="custom-tree-node">
                {{ scope.data.label }}

                <el-dropdown trigger="click">
                  <div
                    class="custom-tree-icon"
                    @click.stop="addOperation(scope.data)"
                  >
                    <div class="custom-tree-icon-item"></div>
                    <div class="custom-tree-icon-item"></div>
                    <div class="custom-tree-icon-item"></div>
                  </div>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item>修改名称</el-dropdown-item>
                      <el-dropdown-item
                        v-if="isSubordinate"
                        @click="subordinateDialogVisible = true"
                      >
                        添加下级
                      </el-dropdown-item>
                      <el-dropdown-item @click="addAllyDialogVisible=true">添加成员</el-dropdown-item>
                      <el-dropdown-item>
                        <span class="span">删除</span>
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </template>
          </el-tree>
        </div>
      </div>
      <div class="data-box-right-box">
        <el-form
          :model="searchForm"
          label-width="70px"
          inline
          label-position="left"
        >
          <el-form-item label="姓名：">
            <el-input class="input-box" v-model="searchForm.name" />
          </el-form-item>
          <el-form-item label="手机号：">
            <el-input class="input-box" v-model="searchForm.name" />
          </el-form-item>
          <el-form-item label="">
            <el-button type="primary" class="search-btn">查询</el-button>
          </el-form-item>
        </el-form>
        <el-button type="primary" :icon="Plus" class="add-user" @click="addAllyDialogVisible=true">
          添加成员
        </el-button>
        <div class="table-box">
          <el-table
            :data="tableData"
            height="100%"
            :header-cell-style="{
              color: '#828A9D',
              textAlign: 'center',
              height: '60px',
              background: '#FAFBFC',
            }"
            :cell-style="{ textAlign: 'center', color: '#1B2431' }"
          >
            <el-table-column prop="date" label="归属组织" />
            <el-table-column prop="name" label="姓名">
              <template #default="scope">
                <span class="user-name" @click="allyDialogVisible = true">
                  张娜
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="state" label="身份" />
            <el-table-column prop="city" label="手机号" />
            <el-table-column prop="address" label="分成" />
            <el-table-column prop="zip" label="操作" width="300">
              <template #default="scope">
                <el-button type="primary" link @click="deviceDialogVisible=true">设备管理</el-button>
                <el-button type="primary" link>编辑</el-button>
                <el-button type="primary" link>移除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
  <!-- 添加下级 -->
  <addSubordinateCom
    :show="subordinateDialogVisible"
    @onClose="subordinateDialogVisible = false"
  ></addSubordinateCom>
  <!-- 盟友详情 -->
  <allyDetailCom :show="allyDialogVisible" @onClose="allyDialogVisible=false"></allyDetailCom>
  <!-- 设备管理 -->
  <userDeviceCom
    :show="deviceDialogVisible"
    @onClose="deviceDialogVisible = false"
  ></userDeviceCom>
  <!-- 添加盟友 -->
  <addAllyCom :show="addAllyDialogVisible" @onClose="addAllyDialogVisible=false"></addAllyCom>
</template>
<script setup>
import { onMounted, reactive, toRefs, ref } from 'vue'
import { ArrowRightBold, Plus } from '@element-plus/icons-vue'
import addSubordinateCom from '@/components/addSubordinateCom/index.vue'
import allyDetailCom from '@/components/allyDetailCom/index.vue'
import userDeviceCom from '@/components/userDeviceCom/index.vue'
import addAllyCom from '@/components/addAllyCom/index.vue'
onMounted(() => {
  console.log('index')
})
// 添加盟友
let addAllyDialogVisible = ref(false);
// 设备管理
let deviceDialogVisible = ref(false)
// 盟友详情
let allyDialogVisible = ref(false)
// 添加下级
let subordinateDialogVisible = ref(false)
//
let tableData = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
])
// 搜索form
let searchForm = ref({})
// 是否能添加下级
let isSubordinate = ref(true)
let data = [
  {
    label: '上海联屏文化有限公司（90%）',
    children: [
      {
        label: '福州子公司（70%）',
        children: [
          {
            label: '业务员（70%）',
          },
        ],
      },
    ],
  },
]
const defaultProps = {
  children: 'children',
  label: 'label',
  class: function (tree, node) {
    return 'tree-top'
  },
}
const addOperation = data => {
  console.log(data)
  isSubordinate.value = data.children
}
</script>
<style scoped lang="scss">
@import './index.scss';
</style>
<style lang="scss">
</style>